﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxProgressBar can be displayed either horizontally or vertically. By setting its "layout" property to "reverse", the layout of the widget's UI elements will be reversed.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxprogressbar.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#horizontalProgressBar').jqxProgressBar({value: 50,  width: 300, height: 40 });
            $('#mirrorHorizontalProgressBar').jqxProgressBar({ value: 50, layout: 'reverse',  width: 300, height: 40 });
            $('#verticalProgressBar').jqxProgressBar({ value: 50, orientation: 'vertical',  width: 40, height: 300 });
            $('#mirrorVerticalProgressBar').jqxProgressBar({ value: 50, orientation: 'vertical', layout: 'reverse',  width: 40, height: 300 });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="container" style="font-family: Verdana; font-size: 12px; float: left">
            <b>Default Layout</b>
            <div id='horizontalProgressBar'></div>
            <div style="margin-top: 10px;" id='verticalProgressBar'></div>
        </div>
        <div style="float: right; font-family: Verdana; font-size: 12px;" id="rightContainer">
            <b>Reversed Layout</b>
            <div id='mirrorHorizontalProgressBar'></div>
            <div style="margin-top: 10px; float: right;" id='mirrorVerticalProgressBar'></div>
        </div>
    </div>
</body>
</html>
